import React, { useState,ChangeEvent, useEffect} from 'react';
import { Cascader, Select, Button,Input } from 'antd';
import { observer } from 'mobx-react-lite';
import useStore from '@/context/useStore';
import Editor from 'for-editor';
import {Link,IRouteComponentProps} from 'umi';
import { Collapse ,Modal} from 'antd';
import {postComment} from '@/services/modules/pro'
const { TextArea } = Input;

import './addProject.less';
import { Tabs } from 'antd';

const { TabPane } = Tabs;
const { Option } = Select;
const { Panel } = Collapse;
const tables = ['任务名称','任务成果','保薪技能','提薪技能','考核标准','步骤数量','推荐工期','操作'];

interface Inputs{
    name:string,
    address:string,
    mes:string,
    id:number
}

const AddProject: React.FC<IRouteComponentProps> = ({history,location}) => {
    // 获取行业
    const {proXm} = useStore();                         // 仓库
    const [autoCompleteResult, setAutoCompleteResult] = useState<string[]>([]);
    const websiteOptions = autoCompleteResult.map(website => ({
        label: website,
        value: website,
    }));

    // 实训管理数据
    const [inputThree,setInputThree] = useState<Inputs[]>([{name:'',address:'',mes:'',id:Date.now()}]); 
    // 前置项目
    const [Leadproject,setLeadproject] = useState([{id:Date.now()}]);
    // 评论内容
    const [sendStr,setSentStr] = useState('');
    // 改变评论的状态
    const [sendState,setState] = useState(false);

    // 获取行业接口
    useEffect(() => {
        // 实训大纲
        proXm.getProBriefTree();
        // 项目资源
        proXm.getResourceTree();
        // 前置项目
        proXm.getPushProList();
        // 获取评论数据
        proXm.getComments({id:'8082950640097624064',pageNum:1,pageSize:10});
    },[])


    // tabel切换
    function callback(key: any) {
        console.log(key);
    }
    // 添加实训管理
    function addInputThres(){
        let input = [...inputThree, {name:'',address:'',mes:'',id:Date.now()}]
        setInputThree(input);
    }
    // 减少实训管理
    function reduceInputThree(id:number){
        let input = inputThree.filter(item=>item.id != id);
        setInputThree(input);
    }
    function changeInputs(e:ChangeEvent,index:number){
        let str = (e.target as HTMLInputElement).name;
        if(str == 'name'){
            inputThree[index].name = (e.target as HTMLInputElement).value;
        }else if(str == 'address'){
            inputThree[index].address = (e.target as HTMLInputElement).value;
        }else if(str == 'mes'){
            inputThree[index].mes = (e.target as HTMLInputElement).value;
        }
        let input = [...inputThree];
        setInputThree(input);
    }
    
    // 前置项目
    function onChange(value:any){
        console.log(value);
    }

    // 输入内容
    // const onChangeTxt = (e:React.ChangeEvent<HTMLInputElement>)=> {
    //     console.log('Change:', e.target.value);
    //     setSentStr(e.target.value);
    // };
    // 发送评论
    function discuss(){
        setState(!sendState)
        // setSentStr('');     // 清空
    }
    useEffect(()=>{
        // 添加评论
        postComment({discussDesc:sendStr,proId:'8082950640097624064'}).then(res=>{
            console.log('pppppppp',res)
            if(res.code === 200){
                // 重新获取评论数据
                proXm.getComments({id:'8082950640097624064',pageNum:1,pageSize:10});
            }
        })
    },[sendState])

    return <div className='addProject'>
            <div className="main">
                <div className="main_left">
                    <Tabs defaultActiveKey="1" onChange={callback} size='large'>
                        <TabPane tab="实训大纲" key="1">
                            <Collapse accordion>
                                {
                                    proXm.proBriefTree && proXm.proBriefTree.map((item,index)=>{
                                        return <Panel header={item.label} key={index}>
                                            {
                                                item.children && item.children.map((el,le)=>{
                                                    return <li key={le}>
                                                        {el.label}
                                                    </li>
                                                })
                                            }
                                        </Panel>
                                    })
                                }
                            </Collapse>
                            <Editor></Editor>
                        </TabPane>
                        <TabPane tab="实训任务" key="2">
                            <div className='tables'>
                                <div className="tables_head">
                                    <span></span>
                                    <Button type='primary'>添加任务</Button>
                                </div>
                                <div className="tables_center">
                                    {
                                        tables.map((item,index)=>{
                                            return <span key={index}>
                                                {item}
                                            </span>
                                        })
                                    }
                                </div>
                                <div className="tables_img">
                                    <img src="http://111.203.59.61:8060/static/img/Lock.0318bb9d.svg" alt="" />
                                    <p>
                                        还没有任务信息，点击 <a href="#">添加任务</a> 去创建新的任务吧
                                    </p>
                                </div>
                            </div>
                        </TabPane>
                        <TabPane tab="项目资源" key="3">
                            <Collapse accordion>
                                {
                                    proXm.proResourceTree && proXm.proResourceTree.map((item,index)=>{
                                        return <Panel header={item.label} key={index}>
                                            {
                                                item.children.map((el,le)=>{
                                                    return <li key={le}>
                                                        {el.label}
                                                    </li>
                                                })
                                            }
                                        </Panel>
                                    })
                                }
                            </Collapse>
                            <Editor></Editor>
                        </TabPane>
                        <TabPane tab="实训环境" key="4">
                            <div className="tables4">
                            {
                                inputThree.map((item,index)=>{
                                    return <div key={index}>
                                        <p>
                                            <span>环境名称</span>
                                            <input type="text" name='name' value={item.name} onChange={(e)=>{changeInputs(e,index)}} />
                                            <button onClick={()=>addInputThres()}>+</button>
                                            <button onClick={()=>reduceInputThree(item.id)}>-</button>
                                        </p>
                                        <p>
                                            <span>环境地址</span>
                                            <input type="text" name='address' value={item.address} onChange={(e)=>{changeInputs(e,index)}} />
                                        </p>
                                        <p>
                                            <span>环境描述</span>
                                            <input type="text" name='mes' value={item.mes} onChange={(e)=>{changeInputs(e,index)}} />
                                        </p>
                                    </div>
                                })
                            }
                            </div>
                        </TabPane>
                        <TabPane tab="前置项目" key="5">
                            <div className='lades'>
                                <div className='lades_head'>
                                    <span></span>
                                    <Button type='primary'>保存</Button>
                                </div>
                                <div className='lades_center'>
                                    <p>添加与新项目关联的项目</p>
                                    {
                                        Leadproject.map((item,index)=>{
                                            return <div key={item.id}>
                                                <Cascader
                                                    options={proXm.proPushProList}
                                                    onChange={onChange}
                                                />
                                                <span className='spans' onClick={()=>{
                                                    let inputs = [...Leadproject,{id:Date.now()}]
                                                    setLeadproject(inputs)
                                                }}>+</span>
                                                <span className='spans' onClick={()=>{
                                                    let inputs = Leadproject.filter(el=>el.id != item.id)
                                                    setLeadproject(inputs);
                                                }}>-</span>
                                            </div>
                                        })
                                    }
                                    
                                </div>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                {/* 右侧 */}
                <div className="main_right">
                    <div className="right_img">
                        <img src={`http://111.203.59.61:8060`+location.query.str} alt="" />
                    </div>
                    <div className="right_guide">
                        <h3>
                            <span></span>
                            <span>指导老师</span>
                        </h3>
                        <div>
                            <img src="http://111.203.59.61:8060/file_service/group1/M00/00/17/rBsCHWCbtAKAPH2zAAEY_k0ncF888.jpeg" alt="" />
                            <p>李朋</p>
                        </div>
                    </div>
                </div>
            </div>
            <div className="footer">
                <div className="footer_left">
                    <div className="footer_send">
                        <img src='http://111.203.59.61:8060/file_service/group1/M00/00/1E/rBsCHWDIXZmAH7f4AAKHbhW4jwQ430.jpg' />
                        <div>
                            <TextArea showCount maxLength={500} placeholder='来说两句' onChange={(e)=>{
                                setSentStr(e.target.value);
                            }}  />    
                            <Button onClick={discuss}>发表评论</Button>   
                        </div>         
                    </div>
                    <div className="footer_hots">
                        {
                            proXm.commontList && proXm.commontList.map((item,index)=>{
                                return <div key={item.id}>
                                    <img src={`http://111.203.59.61:8060`+item.userPictureUrl} alt="" />
                                    <ul>
                                        <li>黄辉</li>
                                        <li>{item.disReplycontent}</li>
                                        <li>{item.discussTime}</li>
                                    </ul>
                                </div>
                            })
                        }
                    </div>
                </div>
                <div className="footer_right"></div>
            </div>
    </div>
}

export default observer(AddProject);